<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact</title>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<body>
    <div id="app">
        <div class="top">
            <span>任务分配系统——个人中心</span>
            <a href="http://localhost:8080/ManageSystem/Boss/main.html">首页</a>
            <a href="javascript:;">个人中心</a>
           <img :src="imageUrl" onerror="this.src='../profilephoto/default.jpg'" alt="头像" style="height:30px;width:30px;border-radius: 50%">
            <span>{{user.name}}</span>
            <el-button @click="exit">退出登录</el-button>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="http://localhost:8080/ManageSystem/Boss/main.html">当前任务</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/taskArchive.html">归档任务</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/contact.html">成员管理</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/assignment.html">任务分配</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/issueNotice.html">发布公告</a></li>
                <li><a href="http://localhost:8080/ManageSystem/Boss/notice.html">公告</a></li>
            </ul>
        </div>
        <div class="main">
            <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8080/ManageSystem/user/loadUserImg"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img :src="imageUrl" class="avatar" onerror="this.src='../profilephoto/default.jpg'">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <br>
                <span>用户名</span>
                <span>当前用户名-{{user.name}}</span><br>
                <input
                    type="text"
                    v-model="newName"
                    maxlength="10"
                >
                </input>
            <el-button @click="updateUserName">修改用户名</el-button>
            <br>
        </div>
        <div class="other">
            <div>
                <p>部门:{{departmentName}}</p>
                <p>当前邮箱:{{hideEmail}}<el-button @click="dialogFormVisible = true">修改邮箱</el-button></p>
                <el-dialog title="修改邮箱" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <div class="tip"></div>
                        <input type="text" placeholder="请完整的输入原邮箱" v-model="form.originalEmail"><br>
                        <input type="text" placeholder="请输入修改后的邮箱" v-model="form.newEmail">
                        <input type="button" :disabled=btnDisabled @click="sendEmail" v-model="btnText"></input><br>
                        <input type="text" placeholder="请输入验证码" v-model="vCode">
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script>

    new Vue({
        el: "#app",
        mounted() {
            this.checkSession();
        },
        methods: {
            checkSession() {
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/checkSession"
                }).then(resp => {
                    if (resp.data === null) {
                        alert("请进行登录再操作")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else if(resp.data.position ==='成员'){
                        alert("权限不足，请从官方入口尝试再次登入")
                        window.location.href = "http://localhost:8080/ManageSystem/login.html";
                    }
                    else{
                        this.selectDepartmentNameFromID();
                        this.user = resp.data;
                        this.imageUrl = "../profilephoto/"+this.user.userId+".jpg";
                        this.newName = this.user.name
                        this.hideEmail = this.user.email.charAt(0)+"***@"+this.user.email.charAt(this.user.email.indexOf('@')+1)+"**.com"
                    }
                })
            },
            selectDepartmentNameFromID(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/selectDepartmentNameFromID"
                }).then(resp => {
                    this.departmentName = resp.data;

                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            updateUserName(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/updateUserName?newName="+this.newName
                }).then(resp => {
                    document.querySelector(".nameTip").innerText = resp.data;
                    this.checkSession();
                })
            },
            sendEmail(){
                let time = 60;
                this.btnDisabled=!this.btnDisabled;
                var _this = this;
                const clean = setInterval(function () {
                    time = time - 1;
                    _this.btnText = time+"秒后可重新获取";
                    if (time === 0) {
                        _this.btnDisabled=!_this.btnDisabled;
                        _this.btnText = "获取验证码";
                        clearInterval(clean);
                    }
                }, 1000);
                axios({
                    method: "post",
                    url: "http://localhost:8080/ManageSystem/user/sendEmail",
                    data: this.form.newEmail
                }).then(resp=>{
                    this.vCode_t = resp.data;
                })
            },
            submit(){
                console.log(this.form)
                var element = document.querySelector(".tip");
                if(this.vCode !== this.vCode_t || this.form.originalEmail !== this.user.email){
                    this.resetForm();
                    element.innerText ="输入信息有错，请再次检查"+this.time+"次尝试后错误将退出登录"
                    this.time--;
                    if(time===0) {
                        axios({
                            method: "get",
                            url: "http://localhost:8080/ManageSystem/user/delectSession",
                        }).then(resp => {
                            this.checkSession();
                        })
                    }
                }
                else{
                    axios({
                        method: "get",
                        url: "http://localhost:8080/ManageSystem/user/updateUserEmail?newEmail="+this.form.newEmail,
                    }).then(resp=>{
                        document.querySelector(".tip").innerText = resp.data;
                        if(resp.data==="") {
                            this.dialogFormVisible = false;
                            this.resetForm();
                            this.time = 3;
                            this.checkSession();
                        }
                    })
                }
            },
            resetForm() {
                this.form.originalEmail='';
                this.form.newEmail='';
                this.vCode_t='lonelysnow';
                this.vCode='';
            },
            exit(){
                axios({
                    method: "get",
                    url: "http://localhost:8080/ManageSystem/user/delectSession",
                }).then(resp=>{
                    this.checkSession()
                })
            },
        },
        data() {
            return{
                user:{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                },
                hideEmail:'',
                departmentName:'',
                profilephotoSrc:'',
                department:{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                },
                userData:[{
                    userId:'',
                    departmentId:'',
                    name:'',
                    password:'',
                    position:'',
                    email:'',
                }],
                imageUrl: '',
                newName:'',
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    originalEmail:'',
                    newEmail:'',
                },
                time:3,
                btnDisabled:false,
                btnText:'发送验证码',
                vCode_t:'lonelysnow',
                vCode:'',
            }
        }

    })
</script>
</html>